<template>
	<view>
		
		<swiper circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="300">
			<swiper-item v-for="item in bannerList" :key="item.bannerid">
				<view class="swiper-item">
					<image :src="item.img" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		
		<u-grid :col="5">
			<u-grid-item class="grid-item" v-for="item in navList" :key="item.navid">
				<image  :src="item.imgurl"></image>
				<text>{{item.title}}</text>
			</u-grid-item>
		</u-grid>
		
		
		<u-cell-group>
			<u-cell
				v-for="item in proList"
				:key="item.proid"
				:icon='item.img1'
				:iconStyle="iconStyle"
				@click="goDetail(item.proid)"
			>
			<template #title>
				<text class="u-line-2">{{item.proname}}</text>
			</template>
			</u-cell>
		</u-cell-group>
		
		<view @click="backTopClick" class="back-top" v-show="scrollTop > 280">
			<u-icon name="arrow-upward" color="#f66" size="28"></u-icon>
		</view>
			
	</view>
</template>

<script>
	import {getBannerList, getNavList, getProListData} from '../../api/home.js'
	export default {
		data() {
			return {
				bannerList: [],
				navList: getNavList(),
				proList: [],
				iconStyle:{
					width: '80px',
					height: '80px'
				},
				count: 2,
				scrollTop: 0
			}
		},
		mounted() {
			getBannerList().then(res => {
				// console.log(res);
				this.bannerList = res.data
			})
			
			getProListData().then(res => {
				this.proList = res.data	
			})
		},
		onPageScroll({scrollTop}){
			// console.log(scrollTop);
			this.scrollTop = scrollTop
		},
		onReachBottom(){
			getProListData({
				count: this.count
			}).then(res => {
				if(res.data.length > 0){
					// 有数据
					this.proList = [...this.proList,...res.data]
					this.count++
					
					
				}else {
					// 没有数据
					uni.showToast({
						title: '没有更多数据了！',
						duration: 1000
					})
				}
			})
		},
		methods: {
			backTopClick(){
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
			goDetail(proid){
				// console.log(proid);
				uni.navigateTo({
					url: '/pages/detail/detail?proid=' + proid
				})
			}
		},
		onPullDownRefresh() {
				getProListData({
					count: 1
				}).then(res => {
					this.proList = res.data
					this.count = 2
					// 关闭下拉刷新
					uni.stopPullDownRefresh();
				})
				
			}
	}
</script>

<style scoped>
	swiper {
		height: 240px;
	}
.swiper-item {
	width: 100%;
	height: 240px;
}
.swiper-item image {
	width: 100%;
	height: 240px;
}
.grid-item image {
	width: 42px;
	height: 42px;
}
.grid-item {
	margin: 12px 0;
}
.grid-item text {
	font-size: 14px;
}
.back-top {
	position: fixed;
	right: 12px;
	bottom: 62px;
	background-color: white;
	border-radius: 50%;
	border: 1px solid #f66;
	padding: 4px;
}
</style>
